<template>
    <el-card class="user-info-display-card">
        <el-container>
            <el-aside style="width: 30%;">
                <div style="padding-top: 20px;">
                    <el-avatar :src="getImageUrl(displayData.avatar)" :size="200" shape="square" />
                </div>
            </el-aside>
            <el-main>
                <div class="info-content">
                    <el-text>用户名：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.name }}</el-text>
                    <el-text>简介：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.bio }}</el-text>
                    <el-text>邮箱：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.email }}</el-text>
                    <el-text>生日：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.birthdate }}</el-text>
                    <el-text>注册时间：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.createdAt }}</el-text>
                    <el-text>关注数：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.followingCount }}</el-text>
                    <el-text>粉丝数：</el-text>
                    <el-text style="margin-left: 3%;">{{ displayData.followerCount }}</el-text>

                </div>
            </el-main>
        </el-container>
    </el-card>
</template>

<script setup lang="ts">
import { defaultUserInfo } from '@/defaults/userDefault';
import { UserInfoDisplayType } from '@/types/userType';
import { tokenAxios } from '@/utils/tokenAxiosUtils';
import { computed, onMounted, PropType, ref, watch } from 'vue';
import { getImageUrl } from '@/utils/mediaUtils';

const props = defineProps<{
    userId: number;
}>();

const userInfoData = ref<UserInfoDisplayType>();

const displayData = computed(() => {
    return { ...defaultUserInfo, ...userInfoData.value };
})

const getUserInfo = async () => {
    try {
        const res = await tokenAxios.get(`/user/getUserInfo/${props.userId}`);
        userInfoData.value = res.data;
    } catch (error) {
        console.error("获取用户数据失败", error)
    }
}

onMounted(() => {
    getUserInfo();
})

watch(() => props.userId, (newId) => {
    console.log('UserInfoDisplayComponent--ID变化:', props.userId, newId)
    getUserInfo();
})
</script>

<style scoped>
.info-content {
    display: flex;
    flex-direction: column;
    background-color: bisque;
}

.info-content .el-text {
    align-self: flex-start;
}
</style>